<template>
  <div class="userAdress">
    <back-title :message="message"></back-title>
    <div class="radio" v-if="this.flag === '1'">
      <table border="0" cellpadding="0" v-for="(item, index) in filterAdress" :key="index" width="100%">
        <tr>
          <td><input type="radio" :value="item.address_id" v-model="radio" @click="confirm(item.address_id)" /></td>
          <td>
            <label :for="item.address_id">
              <van-cell value="编辑" is-link @click="goEdit(item)" :label="getDetail(item)">
                <!-- 使用 title 插槽来自定义标题 -->
                <template #title>
                  <span class="custom-title">{{item.consignee}} {{item.consignee_phone | phoneNumFilter}}</span>
                  <van-tag plain type="danger" v-if="item.default_flag == 1">默认</van-tag>
                </template>
              </van-cell>
            </label>
          </td>
        </tr>
      </table>
    </div>
    <div class="cell" v-else>
      <van-cell-group v-for="(item, index) in filterAdress" :key="index">
        <van-cell value="编辑" is-link @click="goEdit(item)" :label="getDetail(item)">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{item.consignee}} {{item.consignee_phone | phoneNumFilter}}</span>
            <van-tag plain type="danger" v-if="item.default_flag == 1">默认</van-tag>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="btn-newAdress">
      <van-button type="primary" size="large" @click="addAddress">新增地址</van-button>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  // import eventBus from './eventBus.js'
  import BackTitle from '../../../components/BackHeader/BackTitle.vue'
  export default {
    components: {
      BackTitle
    },
    data() {
      return {
        radio: 0,
        message: '收货地址',
        flag: 0
      }
    },
    filters: {
      phoneNumFilter(value) {
        if (!value) {
          return ''
        }
        let str = value
        str = str.toString().replace(/^(\d{3})(\d{4})(\d{4})/g, '$1****$3')
        return str
      }
    },
    created() {
      this.flag = this.$route.query.flag
      console.log('this.flag:', typeof this.flag)
      console.log(this.address)
      console.log('filterAdress:', this.filterAdress)
    },
    methods: {
      ...mapMutations(['SET_ID']),
      getDetail(item) {
        return item.province_name + item.city_name + item.region_name + item.detail_address
      },
      // 地址编辑页
      goEdit(item) {
        this.$router.push({
          path: '/Set/UserAdress/edit',
          query: {
            item: item.address_id
          }
        })
      },
      confirm(info) {
        console.log('info:', info)
        this.SET_ID(info)
        this.$router.go(-1)
      },
      // 新增地址
      addAddress() {
        this.$router.push({
          name: 'AddAddress'
        })
      }
    },
    computed: {
      ...mapState(['address', 'loginToken', 'id']),
      filterAdress() {
        return this.address.filter(value => {
          return value.user_id === this.loginToken.userId
        })
      }
    }
  }
</script>

<style scoped>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .btn-newAdress {
    position: fixed;
    bottom: 0;
    left: 10px;
    right: 10px;
  }

  .van-button {
    background-color: #FF414E;
    border-radius: 25px;
  }
</style>
